<template>
  <div>
    <!--头部-->
    <div class="weui-panel__bd">
      <div class="weui-media-box weui-media-box_appmsg shop">
        <div class="weui-media-box__hd" v-if="!shop.smImageUrl"></div>
        <div class="weui-media-box__hd" v-if="shop.smImageUrl" :style="'backgroundImage: url('+(shop.smImageUrl.substr(0,4).toLowerCase() == 'http' ? shop.smImageUrl : resUrl+shop.smImageUrl)+')'"></div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">
            <span>{{shop.name}}</span>
            <span class="authentication" v-if="shop.status==7">认证商铺</span>
          </h4>
          <p class="weui-media-box__desc">
            <span>{{shop.creditRating}}</span><span>粉丝{{shop.followersNum}}</span>
          </p>
          <div v-if="!userId" class="shop-btn collect" @click="followClick">
            <span class="icon icon-favorites" :class="{red:isFollow}"></span>
            <span :class="{red:isFollow}">关注/提醒</span>
          </div>
        </div>
      </div>
    </div>

    <!--店铺数据-->
    <div class="shop-data">
      <div>
        <p>{{shop.payMoneySum | toDecimal}}元</p>
        <p>成交总额</p>
      </div>
      <div>
        <p>{{shop.payNum}}笔</p>
        <p>月销量</p>
      </div>
      <div>
        <p>{{shop.productNum}}件</p>
        <p>拍品</p>
      </div>
    </div>

    <div class="splitBlock"></div>

    <!--导航栏-->
    <div class="nav">
      <ul>
        <li>
          <router-link :to="{name:'shopDetail.shopLots',query:{shopId:shopId,userId:userId}}" replace>
            <span class="nav-text">拍品</span>
          </router-link>
        </li>
        <li class="nav-special">
          <router-link :to="{name:'shopDetail.shopSpecial',query:{shopId:shopId}}" replace>
            <span class="nav-text">专场<i class="icon icon-xia"></i></span>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'shopDetail.shopCollection',query:{shopId:shopId,type:collectionVal}}" replace>
            <span class="nav-text">藏品</span>
          </router-link>
        </li>
      </ul>
    </div>

    <router-view></router-view>

  </div>
</template>

<script>
  import {ipconfig} from '../../assets/js/ipconfig';
  import {getUser} from '../../assets/js/tools.js';
  import {getShopDetail,getFollow,updateShopFollowers} from '../../assets/js/getData';
  export default {
    name: "shopDetail",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        shopId:null,//商铺ID
        userId:null,
        shop:{},//商铺详情对象
        isFollow:null,//是否关注
        collectionVal:null,//拍品类别，藏品枚举值
      }
    },
    created(){
      this.shopId = this.$route.query.shopId;

      if(this.$route.query.hasOwnProperty('userId')){
        this.userId = this.$route.query.userId;
      }

      if(getUser()&&!this.userId){
        this.getFollow();
      }
      //获取店铺详情
      this.getShopDetail();
    },
    methods:{
      //获取店铺详情
      async getShopDetail(){
        let params = {};
        if(this.userId){
          params = {
            userId:this.userId
          }
        }else {
          params = {
            id:this.shopId,
          }
        }
        let res = await getShopDetail(params);
        if(res.data.reqResult.code>0){
          this.shop = res.data.data;
          this.shopId = this.shop.id;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //点击收藏关注
      async followClick(){
        if(getUser(this,this.$route.fullPath)){
          if(this.isFollow){
            //取消关注
            let res = await updateShopFollowers(this.shopId,0);
            if(res.data.reqResult.code>0){
              this.getFollow();
              this.getShopDetail();
              Toast('取消收藏成功');
            }else {
              Toast(res.data.reqResult.msg);
            }
          }else {
            //关注
            let res = await updateShopFollowers(this.shopId,1);
            if(res.data.reqResult.code>0){
              this.getFollow();
              this.getShopDetail();
              Toast('收藏成功');
            }else {
              Toast(res.data.reqResult.msg);
            }
          }
        }
      },
      //获取用户是否关注
      async getFollow(){
        let res = await getFollow(this.shopId,2);
        if(res.data.reqResult.code>0){
          this.isFollow = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
    }
  }
</script>

<style scoped>
  /*头部*/
  .collect{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .collect .icon-favorites{
    font-size: 0.65rem;
    color: #808080;
  }
  .collect span:last-child{
    font-size: 0.5rem;
    color: #808080;
  }
  /*店铺数据*/
  .shop-data{
    display: flex;
    justify-content: space-around;
    padding: 0.65rem 0;
    border-top: 1px solid #E5E5E5;
  }
  .shop-data p{
    text-align: center;
  }
  .shop-data>div p:first-child{
    font-size: 0.85rem;
    color: #1A1A1A;
    height: 1.2rem;
    line-height: 1.2rem;
  }
  .shop-data>div p:last-child{
    height: 0.85rem;
    line-height: 0.85rem;
    font-size: 0.6rem;
    color: #999999;
  }
  /*导航栏*/
  .nav{
    background: #fff;
  }
  .nav>ul{
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 0;
  }
  .nav>ul:after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
    height: 1px;
    background: #E5E5E5;
  }
  .nav>ul>li{
    flex-grow: 1;
    text-align: center;
  }
  .nav-text{
    font-size: 0.8rem;
    color: #282828;
    padding: 0 1rem;
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    box-sizing: border-box;
  }
  .nav-special{
    position: relative;
  }
  .nav-special .nav-text .icon-xia{
    color: #282828;
  }
  .nav-special .router-link-active .nav-text{
    background-image: url("../../../static/images/prdMoreTypeActive.png");
  }
  .router-link-active .nav-text{
    color: #C50000 !important;
    border-bottom: 2px #C50000 solid;
  }
  .nav-special ul{
    position: absolute;
    left: 0;
    top: 32px;
    width: 100%;
    background-color: #fff;
  }
  .nav-special ul li{
    line-height: 1.5rem;
  }
  .active>span{
    color: #c40002 !important;
  }

</style>
